import { Form, Input, InputNumber, Popconfirm, Table, Typography } from "antd";

const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}) => {
  const inputNode =
    inputType === "number" ? (
      <InputNumber controls={false} autoComplete="off" />
    ) : (
      <Input autoComplete="off" />
    );

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{ margin: 0 }}
          rules={
            inputType === "number"
              ? [
                  {
                    required: true,
                    message: `Please Input ${title}!`,
                  },
                ]
              : undefined
          }
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

export default EditableCell;
